<template>
    <div class="project-list-page">
        <div class="module-body">
           <div class="button-bar">
             <el-button-group>
              <el-button size='small' autofocus>全部 (0)</el-button>
              <el-button size='small'>xxx (0)</el-button>
              <el-button size='small'>jjj (0)</el-button>
              <el-button size='small'>ddd (0)</el-button>
            </el-button-group>
            <el-button  type="primary" class="button addBtn" size="small" @click="showEditDialog"><i class="el-icon-plus"></i> 添加项目</el-button>
           </div>

          <div class="project-body">
              <el-row>
                <el-col :span="4" v-for="(project, index) in projectLists" :key="index" class='project-card'>
                  <div class="el-card is-always-shadow">
                    <img :src="project.cover" class="image cover">
                    <div class="card-content">
                      <p class="project-name">{{project.name}}</p>
                      <p class="time">{{project.created_at}}</p>
                      <div class="bottom">
                          <a href="http://baidu.com"><i class="fa fa-github"></i></a>
                          <i class="fa fa-globe"></i>
                          <i class="fa fa-cloud"></i>
                          <i class="el-icon-edit" style="font-size:16px;"></i>
                          <i class="el-icon-delete" style="font-size:16px;"></i>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
          </div>
        </div>
         <el-dialog title="添加&编辑项目" :visible.sync="checkVisibale" label-width="120px" width="30%">
          <edit></edit>
        </el-dialog>
    </div>
</template>



<script>
import Edit from './Edit.vue';
export default {
  name: 'projectList',
  components:{
    Edit
  },
  data() {
    return {
       checkVisibale: false,
       form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
      projectLists: [
       {
         id: 1,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 2,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 3,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 4,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 5,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 6,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 7,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
       {
         id: 8,
         name: 'xxxxx',
         cover: '/images/focus_weixin.png',
         desc: '这是一个xxxxxxxxxxxxxx',
         isOpenSource: true,
         openUrl: 'http://baidu.com',
         showUrl: 'http://baidu.com',
         created_at: '2018-10-20',
       },
      ],
    };
  },
  methods: {
    showEditDialog() {
      this.checkVisibale = true
    }
  }
};
</script>

<style lang="scss" scoped>
.project-list-page {
  .button-bar {
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #edf1f7;
    border-radius: 2px;
    margin-bottom: 20px;
      .addBtn{
        float: right;
      }
  }
  
  .project-body{
      .project-card {
         margin: 0 20px 20px 30px;
          .cover{
            width: 100%;
            display: block;
          }
          .card-content{
            padding:10px;
            .project-name{
              font-size: 18px;
              padding-bottom:5px;
            }
            .time {
              font-size: 13px;
              color: #999;
              margin: 3px
            }

            .bottom{
              display: inline;
              .projectbtn{
                float: right;
              }
            }
          }
      }
  }
  
}

</style>

